<template>
  <div id="app">
    <div class="head">
      <span>回收平台 . 门面注册</span>
    </div>
    <!-- 步骤条 -->
    <div>
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="注册须知" description="确认注册须知内容" />
        <el-step title="门店描述" description="完善门店基本信息" />
        <el-step title="资质上传" description="确认门店开店资质" />
      </el-steps>
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 注册须知 -->
      <div class="Notice" v-show="Notice">
        <span
          >1、我在OMINI回收已经开了个店了,我用别人的身份证再开一个店可以吗？</span
        ><br />
        <span
          >答:不可以。未经OMINI回收平台同意,将本人OMINI回收账号提供给他人做开店使用,由此导致相关争议，诉讼及因店铺经营中的违法违规行为导致一切人身，财产权益损害，均由本人自行承担全部民事、行政及刑事责任。
        </span>
        <br />
        <span> 2、开企业店铺需要满足什么条件?</span> <br />
        <span
          >答:企业开店需完成支付宝认证和责任人认证,店铺负责人需要对该OMINI回收店铺的运营及管理全面负责,包含但不限于:该企业的法定代表人、股东、OMINI回收店铺的运营人等,具体请参考:企业店铺开店流程。
        </span>
        <br />
        <span>3、我可以开多个店铺吗?</span><br />
        <span
          >答：同一会员已开设的店铺均须同时满足以下要求，才能获得多店权益：
          (一)近365天无出售假冒商品违规、严重违规、一般违规扣分达12分(含)以上等违规记录,且无其他风险特征；
          (二)满足一定经营条件(如近365天确认收货金额>=120万且近12个自然月持续有成交)</span
        >
        <br />
        <span
          >4、我已经开过OMINI回收店,现在想要注销原来的店铺重新开店,可以吗?</span
        >
        <br />
        <span>答:满足条件就可以注销。具体请参考:如何注销OMINI回收店铺。</span>
      </div>
      <!-- 门店描述 -->
      <div class="Describe" v-show="Describe">
        <!-- 表单 -->
        <div class="left">
          <div>
            <span>手机号 :</span>
            <el-input
              @blur="Blur"
              v-model="input1"
              placeholder="请输入11位手机号"
              class="w-50 m-2 Ipt"
              size="large"
            />
          </div>
          <div>
            <span>密码 :</span>
            <el-input
              v-model="input2"
              placeholder="请输入验证码"
              class="w-50 m-2 Ipt"
              size="large"
            />
          </div>
          <div>
            <span>门店名称 :</span>
            <el-input
              v-model="input3"
              placeholder="请输入门店名称"
              class="w-50 m-2 Ipt"
              size="large"
            />
          </div>
          <div>
            <span>门店位置 :</span>
            <el-input
              v-model="stores.inpVal"
              class="w-50 m-2 Ipt"
              size="large"
            />
          </div>
          <div>
            <span>门店Logo :</span>
            <el-upload
              :submit="Submit"
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              :limit="1"
            >
              <el-icon><Plus /> </el-icon>
              <span style="font-size: 10px; margin-top: 20px"
                >点击上传图片</span
              >

              <template #file="{ file }">
                <div>
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <el-icon><Download /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <el-icon><Delete /></el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>

            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </div>
          <div>
            <span>门店图片 :</span>
            <el-upload
              ref="uploadRef"
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              :limit="3"
            >
              <el-icon><Plus /> </el-icon>
              <span style="font-size: 10px; margin-top: 20px"
                >点击上传图片</span
              >

              <template #file="{ file }">
                <div>
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <el-icon><Download /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <el-icon><Delete /></el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>

            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </div>
        </div>
        <!-- 地图 -->
        <div class="right" v-show="Describe">
          <InitMap :flag="false"></InitMap>
        </div>
      </div>
      <!-- 资质上传 -->
      <div class="Qualifications" v-show="Qualifications">
        <!-- 表单 -->
        <div class="left">
          <div>
            <span class="Span">注册人姓名:</span>
            <el-input
              @blur="Blur"
              v-model="input5"
              placeholder="请输入注册人姓名(必填)"
              class="w-50 m-2 Ipt"
              size="large"
            />
          </div>
          <div>
            <span class="Span">注册人身份证号:</span>
            <el-input
              v-model="input6"
              placeholder="请输入注册人身份证号(必填)"
              class="w-50 m-2 Ipt"
              size="large"
            />
          </div>
          <div>
            <span class="Span">注册名称:</span>
            <el-input
              v-model="input7"
              placeholder="请输入注册名称(非必填)"
              class="w-50 m-2 Ipt"
              size="large"
            />
          </div>
          <div>
            <span class="Span">社会信用代码证号:</span>
            <el-input
              v-model="input8"
              class="w-50 m-2 Ipt"
              size="large"
              placeholder="请输入社会信用代码证号(非必填)"
            />
          </div>
          <div>
            <span class="Span">税务登记证号:</span>
            <el-input
              v-model="input9"
              class="w-50 m-2 Ipt"
              size="large"
              placeholder="请输入税务登记证号(非必填)"
            />
          </div>
          <div>
            <span class="Span">注册地址:</span>
            <el-input
              v-model="input10"
              class="w-50 m-2 Ipt"
              size="large"
              placeholder="请输入注册地址(非必填)"
            />
          </div>
        </div>
        <!-- 地图 -->
        <div class="right" v-show="Describe">地图地址</div>
      </div>
    </div>
    <!-- 右下角按钮区域 -->
    <div class="Btn">
      <button @click="Refuse" v-show="Notice">拒绝</button>
      <button @click="Agree" v-show="Notice">我已阅读同意</button>
      <!--  -->
      <button @click="PreviousStep" v-show="Describe">上一步</button>
      <button @click="nextStep" v-show="Describe">下一步</button>
      <!--  -->
      <button @click="UpStep" v-show="Qualifications">上一步</button>
      <button @click="complete" v-show="Qualifications">注册完成</button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import axios from "axios";
// 导入地图组件
import InitMap from "../components/InitMap.vue";
// 导入 pinia
import { useCounterStore } from "../stores/counter.js";
import {
  Register,
  Login,
  employeeList,
  employeeUpdateStore,
} from "../api/index.js";
// 注册测试   params
// Register(
//   "5",
//   "幼儿园",
//   "18785627148",
//   "song1014",
//   "幼儿园",
//   "522224199810145073"
// )
//   .then((res) => {
//     console.log(res);
//   })
//   .catch((error) => {
//     console.log(error);
//   });

// 测试
// employeeUpdateStore(1)
//   .then((res) => {
//     console.log(res);
//   })
//   .catch((error) => {
//     console.log(error);
//   });
// 激活 pinia
// const stores = useCounterStore();
const router = useRouter();
const active = ref(0);
const Notice = ref(true);
const Describe = ref(false);
const Qualifications = ref(false);
const uploadRef = ref(null);
const input1 = ref("");
const input2 = ref("");
const input3 = ref("");
const input4 = ref("江苏省徐州市中国矿业大学南湖校区文化学院");
const input5 = ref("");
const input6 = ref("");
const input7 = ref("");
const input8 = ref("");
const input9 = ref("");
const input10 = ref("");
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
const stores = useCounterStore();
// 点击 拒绝注册须知
const Refuse = () => {
  router.push({
    path: "/login",
  });
};
// 点击我已阅读同意
const Agree = () => {
  active.value = 1;
  Notice.value = false;
  Describe.value = true;
};
// 点击门店描述的上一步
const PreviousStep = () => {
  active.value = 0;
  Notice.value = true;
  Describe.value = false;
};
// 点击门店描述的下一步
const nextStep = () => {
  if (
    /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/.test(
      input1.value
    )
  ) {
    if (input2.value != "") {
      if (input3.value != "") {
        if (input4.value != "") {
          active.value = 2;
          Describe.value = false;
          Qualifications.value = true;
        } else {
          ElMessage({
            message: "请输入门店位置",
            type: "error",
          });
        }
      } else {
        ElMessage({
          message: "请输入门店名称",
          type: "error",
        });
      }
    } else {
      ElMessage({
        message: "请输入验证码",
        type: "error",
      });
    }
  } else {
    ElMessage({
      message: "请输入正确字段的手机号",
      type: "error",
    });
  }
};
// input 标签失去焦点 Blur
const Blur = () => {};
// 点击第三步的上一步操作
const UpStep = () => {
  Describe.value = true;
  Qualifications.value = false;
  active.value = 1;
};
// 点击第三步的下一步操作  身份证正则判断  注册完成操作
let tmp =
  /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
const complete = () => {
  if (input5.value != "") {
    if (tmp.test(input6.value)) {
      Qualifications.value = false;
      active.value = 3;
      ElMessage({
        message: "注册成功",
        type: "success",
      });
      router.push({
        path: "/login",
      });
    } else {
      ElMessage({
        message: "请正确输入注册人身份证号码",
        type: "error",
      });
    }
  } else {
    ElMessage({
      message: "请输入注册人姓名",
      type: "error",
    });
  }
};
// 这下面的是 图片上传验证
const handleRemove = (file) => {
  console.log(file);
};
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
  console.log(file);
};
const handleDownload = (file) => {
  console.log(file);
};
const Submit = () => {
  console.log(111);
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100vh;
  background-color: rgba(247, 248, 253, 1);
  .head {
    margin-bottom: 20px;
    width: 100%;
    height: 80px;
    background-color: rgba(95, 114, 226, 1);
    display: flex;
    align-items: center;
    span {
      margin-left: 20px;
      font-family: "Arial Negreta", "Arial Normal", "Arial";
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
      color: #ffffff;
      text-align: center;
    }
  }
  .content {
    width: 75%;
    margin: 30px auto;
    background-color: #ffffff;
    padding: 15px 30px 0 30px;
    .Notice {
      span {
        display: inline-block;
        margin-bottom: 15px;
      }
      span:nth-of-type(2n) {
        font-weight: 400;
        font-size: 12px;
        font-family: "微软雅黑 Bold", "微软雅黑";
      }
      span:nth-of-type(2n-1) {
        font-weight: 800;
        font-size: 15px;
        font-family: "微软雅黑 Bold", "微软雅黑";
      }
    }
    .left {
      width: 70%;
      div {
        margin-bottom: 15px;
        width: 400px;
        display: flex;
        align-items: center;
        span {
          text-align: right;
          height: 40px;
          width: 120px;
          margin-right: 10px;
        }
        .Span {
          width: 260px;
        }
        .Ipt {
          height: 40px;
          width: 500px;
        }
      }
    }
    .right {
      width: 500px;
      height: 400px;
    }
    .Describe {
      display: flex;
    }
  }
  .Btn {
    position: absolute;
    right: 30px;
    bottom: 30px;
    button:nth-of-type(1) {
      color: #ffffff;
      padding: 15px 40px;
      border: 0;
      margin-right: 10px;
      background-color: rgba(245, 54, 92, 0.8);
      border-radius: 10px;
    }
    button:nth-of-type(1):hover {
      background-color: rgba(245, 54, 92, 1);
    }
    button:nth-of-type(2) {
      color: #ffffff;
      padding: 15px 40px;
      border: 0;
      margin-right: 10px;
      background-color: rgba(94, 114, 228, 0.8);
      border-radius: 10px;
    }
    button:nth-of-type(2):hover {
      background-color: rgba(94, 114, 228, 1);
    }
    // 界限
    button:nth-of-type(3) {
      color: #ffffff;
      padding: 15px 40px;
      border: 0;
      margin-right: 10px;
      background-color: rgba(245, 54, 92, 0.8);
      border-radius: 10px;
    }
    button:nth-of-type(3):hover {
      background-color: rgba(245, 54, 92, 1);
    }
    button:nth-of-type(4) {
      color: #ffffff;
      padding: 15px 40px;
      border: 0;
      margin-right: 10px;
      background-color: rgba(94, 114, 228, 0.8);
      border-radius: 10px;
    }
    button:nth-of-type(4):hover {
      background-color: rgba(94, 114, 228, 1);
    }
    // 界限
    button:nth-of-type(5) {
      color: #ffffff;
      padding: 15px 40px;
      border: 0;
      margin-right: 10px;
      background-color: rgba(245, 54, 92, 0.8);
      border-radius: 10px;
    }
    button:nth-of-type(5):hover {
      background-color: rgba(245, 54, 92, 1);
    }
    button:nth-of-type(6) {
      color: #ffffff;
      padding: 15px 40px;
      border: 0;
      margin-right: 10px;
      background-color: rgba(94, 114, 228, 0.8);
      border-radius: 10px;
    }
    button:nth-of-type(6):hover {
      background-color: rgba(94, 114, 228, 1);
    }
  }
}
</style>
